﻿
{% extends "menu.html" %}
{% block content %}
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">//<![CDATA[
    $(function () {
        $('#connect_websocket').click(function () {
            if (window.s) {
                window.s.close()
            }
            /*创建socket连接*/
            var socket = new WebSocket("ws://" + window.location.host + "/echo/?id={{ id }}");
            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
            };
            socket.onmessage = function (e) {
                console.log('message: ' + e.data);//打印出服务端返回过来的数据
                if (e.data.length == 2){
                   console.log(e.data);
                }
                else{
                  $('#messagecontainer').prepend('<p>' + e.data + '</p>');
                }

            };
            // Call onopen directly if socket is already open
            if (socket.readyState == WebSocket.OPEN) socket.onopen();
            window.s = socket;
        });
        $('#send_message').click(function () {
            //如果未连接到websocket
            if (!window.s) {
                alert("websocket未连接.");
            } else {
                window.s.send($('#message').val());//通过websocket发送数据
            }
        });
        $('#close_websocket').click(function () {
            if (window.s) {
                window.s.close();//关闭websocket
                console.log('websocket已关闭');
            }
        });

    });
    //]]></script>
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>日志查看</h2>
                </div>
                <div class="col-lg-2">

                </div>
            </div>
        <div class="wrapper wrapper-content animated fadeInRight">

            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox ">

                        <div class="ibox-content">
                        <input type="text" id="message" value="Hello, World!"/>
                        <button type="button" id="connect_websocket" class="btn btn-primary btn-sm">查看间隔5s实时日志</button>
                        <button type="button" id="close_websocket" class="btn btn-w-m btn-danger" >关闭实时日志</button>
                        <button type="button" id="close_websocket" class="btn btn-w-m btn-info" ><a href="/host/hostlist/" style="color: azure"> 返回主机列表</a></button>
                        <div class="hr-line-dashed"></div>
                        <div id="messagecontainer">

                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        </div>
        </div>


    <!-- Mainly scripts -->
    <script src="/static/js/jquery-3.1.1.min.js"></script>
    <script src="/static/js/popper.min.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <script src="/static/js/jquery.metismenu.js"></script>
    <script src="/static/js/jquery.slimscroll.min.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="/static/js/inspinia.js"></script>
    <script src="/static/js/pace.min.js"></script>

    <!-- iCheck -->
    <script src="/static/js/icheck.min.js"></script>
        <script>
            $(document).ready(function () {
                $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                });
            });
        </script>
</body>

</html>
{% endblock %}